import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Image, Animated, TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
var Dimensions = require('Dimensions');
var { height, width } = Dimensions.get('window');

export default class Panel extends Component {
	constructor(props) {
		super(props);
		this.icons = {
			up: 'arrow-up',
			down: 'arrow-down',
		};
		this.state = {
			animation: new Animated.Value(),
			title: props.title,
			expanded: false,
		};
	}
	toggle() {
		let initialValue = this.state.expanded ? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
			finalValue = this.state.expanded ? this.state.minHeight : this.state.maxHeight + this.state.minHeight;

		this.setState({
			expanded: !this.state.expanded,
        });
       
		this.state.animation.setValue(initialValue);
		Animated.spring(this.state.animation, {
            toValue: finalValue,
            friction: 7,
            tension: 1
		}).start();
	}
	_setMaxHeight = event => {
		this.setState({
			maxHeight: this.state.maxHeight > event.nativeEvent.layout.height ? this.state.maxHeight : event.nativeEvent.layout.height,
		});
	};

	_setMinHeight = event => {
		this.setState({
            minHeight: event.nativeEvent.layout.height,
            animation: new Animated.Value(event.nativeEvent.layout.height)
		});
	};

	componentDidMount() {
        
    }

	render() {
		
		if (this.state.expanded) {
			icon = this.icons.up;
		}else{
            icon = this.icons.down
        }
		return (
			<Animated.View style={[styles.container, { height: this.state.animation }]}>
			<TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1">
				<View style={styles.titleContainer} onLayout={e => this._setMinHeight(e)}>
					<Text style={styles.title}>{this.state.title}</Text>
					
						<Icon style={[styles.button,styles.buttonImage]} name={icon} />
					
				</View>
				</TouchableHighlight>
				<View style={styles.body} onLayout={e => this._setMaxHeight(e)}>
					{this.props.children}
				</View>
			</Animated.View>
		);
	}
}
var styles = StyleSheet.create({
	container: {
		backgroundColor: '#fff',
		marginTop: 10,
		overflow: 'hidden',
	},
	titleContainer: {
		flexDirection: 'row',
		borderBottomWidth: 0.2,
		borderBottomColor: 'lightgray',
	},
	title: {
		flex: 1,
		padding: 10,
		color: '#2a2f43',
		fontWeight: 'bold',
		fontSize: 16
	},
	button: {
		width: 30,
		height: 15,
		alignContent: 'center',
		alignSelf: 'center',
		alignItems: 'center',
	},
	buttonImage: {
		fontSize: 16,
	},
	body: {
		padding: 10,
	},
});
